<template>
  <div class="chats">
    <Row>
      <Col span="6"
        ><Card class="onec">
          <div style="text-align: center">
            <Icon type="ios-people" size="30" color="#52CBFF"/>
            <h1>100.5k</h1>
            <p style="font-size: 2px">总访问人数</p>
            <br />
            <div class="avatarList">
              <Avatar
                class="avatar"
                v-for="item in avatarList"
                :src="item"
                :key="item"
              />
            </div>
          </div> </Card
      ></Col>
      <Col span="6"
        ><Card class="twoc">
          <div style="text-align: center">
            <Icon type="ios-eye"  size="30" color="#ffffff"/>
            <h1>500.9W</h1>
            <p>点击量</p>
            <br />
            <Icon type="md-arrow-round-up" size="30" color="red" />上升28.5%
          </div> </Card
      ></Col>
      <Col span="6"
        ><Card class="thrc">
          <div style="text-align: center">
            <Icon type="ios-brush-outline" size="30" color="#52CBFF"/>
            <h1>1000条</h1>
            <p>留言量</p>
            <br />
            <p><Icon type="md-arrow-round-down"  size="30" color="green" />下降0.5%</p>
          </div> </Card
      ></Col>
      <Col span="6"
        ><Card class="fouc">
          <div style="text-align: center">
            <Icon type="ios-globe"  size="30" color="#19BE6B"/>
            <h1>28.9%</h1>
            <p>转化率</p>
            <br />
            <Icon type="logo-pinterest" size="30"/>
          </div> </Card
      ></Col>
    </Row>
    <Row>
      <Col :span="18">
        <Card :bordered="false">
          <p slot="title"><Icon type="md-glasses" />上一月访问量</p>
          <div id="main" style="width: 800px; height: 350px"></div> </Card
      ></Col>
      <Col :span="6">
        <Card :bordered="false">
          <p slot="title"><Icon type="md-planet" />当前在线人数</p>

          <div style="height: 120px; text-align: center">
            <b>现在是 {{ nowTime | formatDate }}</b>
            <h1>{{ soces }}</h1>
            <p>在线访客数</p>
            <br />
            <p><Icon type="ios-timer" />{{ seconds }} 秒后更新</p>
          </div>
        </Card>
        <br />
        <Card :bordered="false">
          <p slot="title"><Icon type="logo-octocat" />当前活跃度</p>
          <Progress :percent="15" status="active" />
          <Progress :percent="25"/>
          <Progress :percent="45" status="active" />
          <Progress :percent="65"/>
          <Progress :percent="100" />
        </Card></Col
      >
    </Row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import henanJson from '../../json/json_province_henan.json'
export default {
  data() {
    return {
      seconds: 5,
      soces: 113,
      nowTime: new Date(),
      avatarList: [
        'http://localhost:8080/img/me.8a3796dd.jpg',
        'http://localhost:8080/img/1.fff8b5a3.png',
        'http://localhost:8080/img/3.a0b41509.png'
      ]
    }
  },
  methods: {
    getmycharts() {
      var myChart = echarts.init(document.getElementById('main'))
      myChart.setOption({
        //   title: {
        //     type: 'bar',
        //     textStyle: {
        //       color: '#6BFBFF',
        //       rich: {
        //         a: {
        //           color: '#6BFBFF',
        //           fontSize: '15',
        //           height: 30,
        //           width: 30
        //         }
        //       }
        //     }
        //   },
        //   tooltip: {},
        //   legend: {
        //     data: ['受理', '代办'],
        //     x: '600', // 'center' | 'left' | {number},
        //     y: '10',
        //     textStyle: {
        //       color: 'black'
        //     }
        //   },
        //   xAxis: {
        //     type: 'category',
        //     data: [
        //       '企业人员终端社会保险关系',
        //       '企业人员参保登记',
        //       '享受待遇人员发放信息变更',
        //       '企业人员参保登记(补收)',
        //       '个人社会保险费补缴'
        //     ],
        //     axisLine: {
        //       lineStyle: {
        //         color: 'white'
        //       }
        //     }
        //   },
        //   yAxis: {
        //     name: '笔数',
        //     axisLine: {
        //       lineStyle: {
        //         color: 'white',
        //         width: 1
        //       }
        //     },
        //     splitLine: {
        //       show: true,
        //       lineStyle: {
        //         type: 'dashed',
        //         color: '#1F4B73'
        //       }
        //     }
        //   },
        //   series: [
        //     {
        //       name: '受理',
        //       type: 'line',
        //       data: [9000, 2000, 3600, 1000, 1000],
        //       barWidth: 30,
        //       itemStyle: {
        //         barBorderRadius: [10, 10, 0, 0],
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: '#83bff6' },
        //           { offset: 0.5, color: '#188df0' },
        //           { offset: 1, color: '#10b6ef' }
        //         ])
        //       }
        //     },
        //     {
        //       name: '代办',
        //       type: 'line',
        //       data: [5000, 2000, 3600, 1000, 1000],
        //       barWidth: 30,
        //       itemStyle: {
        //         // 柱形图圆角，初始化效果
        //         // 第一个值表示顶部的左上角，第二个值表示顶部右上角
        //         // 第三个值表示底部左下角，第四个值表示底部右下角
        //         barBorderRadius: [10, 10, 0, 0],
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //           { offset: 0, color: '#E74442' },
        //           { offset: 0.5, color: '#F75D5A' },
        //           { offset: 1, color: '#FF797B' }
        //         ])
        //       }
        //     }
        //   ]
        // })
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['浏览量', '访问数']
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['1号', '7号', '14号', '18号', '21号', '28号', '31号']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '浏览量',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [140, 232, 101, 264, 90, 340, 250]
          },
          {
            name: '访问数',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 282, 111, 234, 220, 340, 310]
          }
        ]
      })
    },
    getmaps() {
      var myChart = echarts.init(document.getElementById('maps'))
      echarts.registerMap('henan', henanJson, {})
      console.log(henanJson)
      myChart.setOption({
        title: {
          text: '省本级',
          x: '10',
          y: '150',
          textStyle: {
            color: '#ffffff'
          }
        },
        tooltip: {
          formatter: function (params) {
            // console.log(params);
            return (
              params.seriesName + '<br>' + params.name + ':' + params.value[2]
            )
          }
        },
        legend: {
          x: '20',
          y: '400',
          itemWidth: 20,
          itemHeight: 20,
          data: [
            {
              icon: 'circle',
              name: '受理量',
              textStyle: {
                color: '#ffffff'
              }
            }
          ]
        },
        // toolbox: {
        //   show: true,
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'center',
        //   feature: {
        //     mark: { show: true },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        roamController: {
          show: true,
          x: 'right',
          mapTypeControl: {
            yueyang: true
          }
        },
        geo: {
          show: true,
          map: 'henan',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'henan',
            itemStyle: {
              normal: {
                label: {
                  show: true, // 默认是否显示省份名称
                  textStyle: {
                    color: '#ffffff'
                  }
                },
                areaColor: '#08305A', // 背景颜色
                areaStyle: {
                  color: '#08305A' // 默认的地图板块颜色
                },
                borderWidth: 1,
                borderColor: '#2C9ED8'
              }
            },
            emphasis: {
              label: {
                show: true // 选中状态是否显示省份名称
              },
              areaStyle: {
                color: '#08305A' // 选中状态的地图板块颜色
              }
            }
          },
          {
            name: '受理量',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            symbolSize: function (val) {
              return val[2] // 返回data数组中对应的数值
            },
            rippleEffect: {
              scale: '2',
              brushType: 'stroke'
            },
            data: [
              { name: '郑州', value: [113.65, 34.76, 10] },
              { name: '荥阳', value: [113.35, 34.79, 10] },
              { name: '开封', value: [114.35, 34.79, 10] },
              { name: '平顶山', value: [113.29, 33.75, 10] },
              { name: '洛阳', value: [112.44, 34.7, 10] },
              { name: '焦作', value: [113.21, 35.24, 10] },
              { name: '鹤壁', value: [114.17, 35.9, 10] }
              //   { name: '杞县', value: [114.77, 34.56, 10] },
              //   { name: '尉氏', value: [114.17, 34.41, 10] },
              //   { name: '新郑', value: [113.71, 34.4, 10] },
              //   { name: '登封', value: [113.02, 34.46, 10] },
              //   { name: '通许', value: [114.46, 34.48, 10] },
              //   { name: '中牟', value: [114, 34.73, 10] },
              //   { name: '密县', value: [113.35, 34.51, 20] },
              //   { name: '巩县', value: [112.96, 34.76, 20] },
              //   { name: '兰考', value: [114.81, 34.69, 20] },
              //   { name: '新乡', value: [113.85, 35.31, 20] },
              //   { name: '汲县', value: [114.05, 35.44, 20] },
              //   { name: '封丘', value: [114.04, 35.03, 20] },
              //   { name: '获嘉', value: [113.63, 35.27, 20] },
              //   { name: '温贺', value: [113.06, 34.94, 20] },
              //   { name: '济源', value: [112.57, 35.08, 20] },
              //   { name: '南阳', value: [112.53, 33.01, 20] },
              //   { name: '商丘', value: [115.65, 34.44, 20] }
              //   { name: '周口', value: [114.63, 33.63, 20] },
              //   { name: '驻马店', value: [114.02, 32.98, 40] },
              //   { name: '信阳', value: [114.08, 32.13, 30] },
              //   { name: '周口', value: [112.35, 34.49, 20] },
              //   { name: '宛城区', value: [112.55, 33.02, 10] },
              //   { name: '卧龙区', value: [112.53, 32.98, 10] },
              //   { name: '南召县', value: [112.43, 33.5, 10] },
              //   { name: '社旗县', value: [112.93, 33.05, 10] },
              //   { name: '三门峡市', value: [111.2, 34.78, 10] },
              //   { name: '许昌', value: [113.81, 34.02, 10] },
              //   { name: '漯河', value: [114.02, 33.56, 10] },
              //   { name: '濮阳', value: [114.98, 35.71, 10] }
            ],
            itemStyle: {
              color: '#5AEBF7'
            },
            hoverAnimation: true // 动画效果
          }
        ]
      })
    },
    times() {
      setTimeout(() => {
        this.seconds -= 1
        this.times()
        if (this.seconds === 0) {
          this.seconds = 5
        }
      }, 1000)
    }
  },
  mounted() {
    // setTimeout(() => {
    //   this.soces = Math.round(Math.random() * 1000)
    // }, 2000)
    const _this = this // 声明一个变量指向Vue实例this，保证作用域一致
    this.timer = setInterval(() => {
      _this.nowTime = new Date() // 修改数据date
      this.soces = Math.round(Math.random() * 500)
    }, 5000)
    this.times()
    // this.getmaps()
    this.getmycharts()
    // this.getlins()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer) // 在Vue实例销毁前，清除我们的定时器
    }
  }
}
</script>

<style lang = 'less' scoped>
.chats {
  background-size: 100% 100%;
  height: 700px;
  overflow: hidden;
  /* background-image: url('../../assets/Homebodybg.png'); */
}
.box {
  margin-top: 30px;
  display: flex;
}
#main {
  display: flex-wrap;
}
#line {
  text-align: center;
  margin: 0 auto;
  display: flex-wrap;
}
.onec {
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee) !important;
}
.twoc {
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee) !important;

  /* background-image: linear-gradient(to right, #00ffb3, #b7ff00) !important; */
}
.thrc {
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee) !important;

  /* background-image: linear-gradient(to right, #ff0059, #ff00b3) !important; */
}
.fouc {
    background-image: linear-gradient(to right, #fbc2eb, #a6c1ee) !important;

  /* background-image: linear-gradient(to right, #ff00d4, #15ff00) !important; */
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.ivu-col-span-6 {
  padding: 10px;
}
.ivu-col-span-18 {
  padding: 10px;
}
.ivu-icon ivu-icon-ios-people {
  color: #40a9ff !important;
}
.ivu-card {
  border: 1px solid #eeeeee;
}
</style>
